@extends('layouts.master')
@section('content')

<div class="container">
	<div class="row mt-3">
		<div class="col-12">
			<nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
				<ol class="breadcrumb">
				  <li class="breadcrumb-item"><a href="/">Homepage</a></li>
                  <li class="breadcrumb-item"><a href="{{ route('serviceList') }}">Services</a></li>
				  <li class="breadcrumb-item active" aria-current="page">{{ $serviceList->title }}</li>
				</ol>
			</nav>
		</div>
	</div>
</div>

<div class="main-cont">
	<div class="container">
		<div class="row">
            <div class="col-md-9 border-end">
                <h1>{!! $serviceDetail->title !!}</h1>
                <img src="{{ Voyager::image($serviceDetail->image) }}" class="img-fluid" alt="">
                {!! $serviceDetail->description !!}
                <!-- ShareThis BEGIN --><div class="sharethis-inline-share-buttons"></div><!-- ShareThis END -->
                <div class="social-nav row g-0">
                    <div class="col-lg-12 col-md-12 navs">
                        @if($previous == null)
                            <a class="btn btn-light"><i class="fas fa-long-arrow-alt-left"></i> Prev Service</a>
                        @else
                            <a href="{{ route('serviceShow', $previous->slug) }}" class="btn btn-primary"><i class="fas fa-long-arrow-alt-left"></i> Prev Service</a>
                        @endif
                        @if($next == null)
                            <a class="btn btn-light ms-3">Next Service <i class="fas fa-long-arrow-alt-right"></i></a>
                        @else
                            <a href="{{ route('serviceShow', $next->slug) }}" class="btn btn-primary ms-3">Next Service <i class="fas fa-long-arrow-alt-right"></i></a>
                        @endif

                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="related-link">
                    <h4>Services</h4>
                    <ul class="m-0 pb-3">
                        <li class="d-flex">
                            <span class="me-2"><i class="fas fa-calendar-day"></i> </span>
                            <span>{{ date('d F Y', strtotime($serviceDetail->date)) }}</span>
                        </li>
                        @php
                            if(!empty($serviceDetail->venue)){
                                $venue = $serviceDetail->venue;
                            } else {
                                $venue = "-";
                            }
                        @endphp
                        <li class="d-flex">
                            <span class="me-2"><i class="fas fa-map-marker"></i></span>
                            <span>{{ $venue }}</span>
                        </li>
                    </ul>
                </div>
                <div class="p-3">
                    @if(!empty($serviceDetail->gallery))
                        <div class="single-service-details">
                            <h4>Services</h4>
                        </div>
                    @endif
                    @if(!empty($serviceDetail->gallery))
                        <div class="row g-2">
                            <br>
                            @php
                                $images = json_decode($serviceDetail->gallery);
                            @endphp
                            @if($images)
                                @foreach($images as $serviceImage)
                                    <div class="col-md-4 col-sm-12 col-lg-4">
                                        <a class="example-image-link" href="{{ Voyager::image($serviceImage) }}" data-lightbox="example-1"><img src="{{ Voyager::image($serviceImage) }}" class="service_image img-fluid"></a>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>   
@endsection